<template>
  <div class="third-menu-wrapper">
    <!-- <p class="title">{{title}}</p> -->
    <el-menu :default-active="thirdMenuPath" class="el-menu-demo third-menu" mode="horizontal" @select="menuSelect">
      <el-menu-item v-for="route in thirdRotues" :key="route.name" :index="route.totalPath">
        {{route.meta.title}}
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'ThirdMenu',
  data () {
    return {
    }
  },
  props: {
    thirdRotues: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    thirdMenuPath () {
      if (this.$route.matched[2]) {
        return this.$route.matched[2].path
      } else {
        return ''
      }
    }
  },
  methods: {
    menuSelect (key, keyPath) {
      this.$router.push(key)
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.third-menu-wrapper {
  background-color: #ffffff;
  padding: 10px 20px;
  padding-top: 15px;
  border-radius:4px;
  box-shadow: 4px 6px 8px -2px #d2d6da;
  .title {
    margin: 0;
    font-size: 15px;
    color: #333333;
    margin-bottom: 10px;
  }
  .el-menu.third-menu {
    border: none;
    .el-menu-item {
      font-size: 13px;
      background: #FFF;
      border: 1px solid #DCDFE6 !important;
      padding: 8px 12px;
      line-height: 1;
      height: auto;
      border-radius: 4px;
      margin-right: 7px;
      margin-bottom: 6px;
      &:hover {
        color: #409EFF;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff;
      }
    }
    .el-menu-item.is-active {
      color: #3a8ee6;
      border-color: #3a8ee6;
      background-color: #ecf5ff;
    }
  }
}
</style>
